<template>
	<div class="service-satisfaction-container">
		<div class="title"> 服务满意度评分：{{ rateText[rate].score + '&nbsp;' + rateText[rate].text }} </div>
		<hr />
		<div class="container">
			<span class="sub-title">服务建议：</span>
			<p class="content">{{ message }} </p>
		</div>
	</div>
</template>

<script>
import { getServiceRate } from '@/api/api.js';
export default {
	name: '',
	components: {},
	props: {},
	data() {
		return {
			sessionId: this.$route.query.sessionId,
			message: '-',
			rate: 0,
			rateText: [
				{ score: '-', text: '' },
				{ score: '1.0分', text: '非常不满意' },
				{ score: '2.0分', text: '不满意' },
				{ score: '3.0分', text: '一般' },
				{ score: '4.0分', text: '满意' },
				{ score: '5.0分', text: '非常满意' }
			]
		};
	},
	mounted() {
		this.getServiceRate();
	},
	methods: {
		getServiceRate() {
			getServiceRate(this.sessionId)
				.then(res => {
					if (res && res.data && res.data.code === 200 && res.data.data) {
						const { score, suggestion } = res.data.data;
						this.rate = score || 0;
						this.message = suggestion || '-';
					} else {
						console.log('获取服务评价', res.data);
						// this.$message.warning('获取服务评价失败！');
					}
				})
				.catch(err => {
					console.error(err);
					this.$message.warning('获取服务满意度失败！');
				});
		}
	}
};
</script>

<style lang="less" scoped>
.service-satisfaction-container {
	.title {
		font-size: 13px;
		font-weight: 400;
		color: #333333;
		margin: 22px 0 9px 0;
	}
	hr {
		background: #ebebeb;
		opacity: 0.3;
	}
	.container {
		margin-top: 13px;
		.sub-title {
			font-size: 13px;
			font-weight: 400;
			color: #333333;
		}
		.content {
			font-size: 13px;
			font-weight: 400;
			color: #333333;
			margin: -14px 0 0 74px;
			width: 520px;
			word-wrap: break-word;
			word-break: normal;
			line-height: 18px;
			word-break: break-all;
		}
	}
}
</style>
